<template>
  <PageWrapper :sidebarWidth="230" ref="contentElRef">
    <template #sidebar>
      <MyTreeSelect 
        v-bind="treeProps" 
        @select="onTreeSelect" 
        ref="dataGroupRef"
        @add-child="handleAddGroup"
        @edit="handleEditGroup"
      />
    </template>
    
    <a-tabs defaultActiveKey="image" @change="handleChange">
      <a-tab-pane v-for="item in MaterialType" :tab="item.name" :key="item.type" force-render>
      </a-tab-pane>
    </a-tabs>

    <div style="" class="'h-full'">
      <MaterialList :groupId="groupId" :materialType="activeMaterialType" @open-group="handleOpenGroup"/>
    </div>
    <MeterialGroupModal @register="registerModal" @success="handleGroupForm" />
</PageWrapper>


</template>

<script lang="ts" setup name="system-depart-user">
import { PageWrapper } from '/@/components/Page';
import { provide, ref, onUnmounted } from 'vue'
import { useDesign } from '/@/hooks/web/useDesign'
import { useModal } from '/@/components/Modal';
import { MyTreeSelect, MyTreeProps } from '/@/components/BizTreeSelect';
import { listDataGroupTree } from '/@/api/infra/dataGroup'

import MaterialList from '/@/components/BizMaterial/src/components/MaterialList.vue'
import MeterialGroupModal from '/@/components/BizMaterial/src/components/MeterialGroupModal.vue'
import { MaterialType } from '/@/components/BizMaterial/src/material.data'
import { deleteGroup } from '/@/api/infra/material';
import { DataGroupBizType } from '/@/components/BizDataGroup/index';

const activeMaterialType = ref(MaterialType.IMAGE.type)
const contentElRef = ref()
const dataGroupRef = ref<any>()
const materialListRef = ref<any>()
const [registerModal, { openModal }] = useModal();
const { prefixCls } = useDesign('material')

const treeProps = ref<MyTreeProps>({
  api: listDataGroupTree,
  searchField: 'name',
  enableAddChird: true,
  enableDelete: true,
  enableEdit: true,
  deleteApi: deleteGroup,
  params: {
    groupType: activeMaterialType.value,
    bizType: DataGroupBizType.MATERIAL
  }
})
let timer : any = null
provide('prefixCls', prefixCls)

// 当前选中的分组
let groupId = ref()

// 左侧树选择后触发
function onTreeSelect(data) {
  console.log('onTreeSelect', data);
  groupId.value = data
}

const handleOpenGroup = (materialType) => {
  openModal(true, {
    isUpdate: false,
    materialType
  })
}

const handleGroupForm = () => {
  dataGroupRef.value.reload()
}

const handleChange = async (e) => {
  console.log('tab: ', e);
  clearTimeout(timer)
  timer = null
  // 避免切换tab卡顿
  timer = setTimeout(() => {
    activeMaterialType.value = e
    treeProps.value.params.groupType = e
  }, 200)
}

const handleAddGroup = (node) => {
  openModal(true, { 
    isUpdate: false, 
    materialType: activeMaterialType.value, 
    record: { parentId: node.id }}
  )
}

const handleEditGroup = (node) => {
  openModal(true, { 
    isUpdate: true, 
    materialType: activeMaterialType.value, 
    record: { 
      ...node, 
      name: node.title
    }
  })
}

onUnmounted(() => {
  clearTimeout(timer)
  timer = null
})
</script>

<style lang="less">
@import "/@/components/BizMaterial/src/index.less";
</style>
